<template>
  <view class="setting-parent">
    <view class="setting-item">
      <view class="setting-item item-title">经期设置</view>
      <uni-forms label-position="left" label-width="200">
        <uni-forms-item label="月经周期">
          <template slot="label">
            <view class="bottom-option" style="width: 300rpx">
              <view class="label">
                月经周期(天)
              </view>
            </view>
          </template>
          <view class="right-style" @click="cycleShow = true">
            <view style="margin-right: 20rpx">{{ userData.longCycle + " 天" }}</view>
            <uni-icons type="right" size="30" style="display: inline-block;margin: auto 0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="月经持续天数">
          <template slot="label">
            <view class="bottom-option" style="width: 300rpx">
              <view class="label">
                月经持续天数(天)
              </view>
            </view>
          </template>
          <view class="right-style" @click="numberOfDaysForDurationShow = true">
            <view style="margin-right: 20rpx">{{ userData.lastsDays + " 天" }}</view>
            <uni-icons type="right" size="30" style="display: inline-block;margin: auto 0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="基础预测天数">
          <template slot="label">
            <view class="bottom-option" style="width: 300rpx">
              <view class="label">
                基础预测天数
              </view>
            </view>
          </template>
          <view class="right-style" @click="baseForecastDays = true">
            <view style="margin-right: 20rpx">{{ userData.baseForecastDays + " 天" }}</view>
            <uni-icons type="right" size="30" style="display: inline-block;margin: auto 0"></uni-icons>
          </view>
        </uni-forms-item>
        <uni-forms-item label="是否动态预测">
          <template slot="label">
            <view class="bottom-option" style="width: 300rpx">
              <view class="label">
                是否动态预测
              </view>
            </view>
          </template>
          <view class="right-style">
            <switch style="transform:scale(0.9)" color="#FF5184"/>
          </view>
        </uni-forms-item>
      </uni-forms>
      <view style="color: #cacaca;">
        动态预测采用加权平均间隔算法。如果您有更优的算法建议，欢迎与我们联系。
      </view>
      <view style="width: 72%;margin: 30rpx auto;">
        <button style="color:#ffffff;background-color:#fc4b76;border-color:#1AAD19"
                @click="saveHandle">保存设置
        </button>
      </view>
    </view>
    <u-picker title="月经周期" :show="cycleShow" :columns="cycleList" @close="cycleCancel"
              @confirm="cycleConfirm"></u-picker>
    <u-picker title="持续天数" :show="numberOfDaysForDurationShow" :columns="periodLengthList"
              @close="numberOfDaysForDurationCancel" @confirm="numberOfDaysForDurationConfirm"></u-picker>
    <u-picker title="基础预测天数" :show="baseForecastDays" :columns="baseForecastDaysList"
              @close="baseForecastDaysCancel" @confirm="baseForecastDaysConfirm"></u-picker>
  </view>
</template>

<script>
import request from '@/api/request.js';
import {commonCycleDaysList, commonPeriodLengthList, commonBaseForecastDaysList} from "@/api/commonArray";

export default {
  data() {
    return {
      userData: {
        lastsDays: 7,
        longCycle: 27,
        baseForecastDays: 34
      },
      cycleShow: false,
      cycleList: commonCycleDaysList,
      periodLengthList: commonPeriodLengthList,
      baseForecastDaysList: commonBaseForecastDaysList,
      numberOfDaysForDurationShow: false,
      baseForecastDays: false
    }
  },
  methods: {
    // 下面两个方法是月经持续天数
    numberOfDaysForDurationConfirm(selectItem) {
      this.userData.lastsDays = selectItem.value[0]
      this.numberOfDaysForDurationCancel()
    },
    numberOfDaysForDurationCancel() {
      this.numberOfDaysForDurationShow = false
    },
    // 下面两个是月经周期
    cycleConfirm(selectItem) {
      this.userData.longCycle = selectItem.value[0]
      this.cycleCancel()
    },
    cycleCancel() {
      this.cycleShow = false
    },
    // 下面两个是基础预测天数
    baseForecastDaysConfirm(selectItem) {
      this.userData.baseForecastDays = selectItem.value[0]
      this.baseForecastDaysCancel()
    },
    baseForecastDaysCancel() {
      this.baseForecastDays = false
    },
    // 保存设置
    saveHandle() {
      uni.$u.throttle(() => request({
        url: `/menstrualSetting/saveSettingsData`,
        method: 'POST',
        data: {
          openid: uni.getStorageSync("miuUserInfo").openid,
          lastsDays: this.userData.lastsDays,
          longCycle: this.userData.longCycle,
          baseForecastDays: this.userData.baseForecastDays
        },
        custom: {
          showError: false,
          showLoading: true,
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack();
        }, 2500)
      }), 500, true)
    }
  },
  onShow() {
    uni.$u.throttle(() => request({
      url: `/menstrualSetting/selectByOpenid?openid=${uni.getStorageSync("miuUserInfo").openid}`,
      method: 'GET',
      custom: {
        showError: false,
        showLoading: true,
      }
    }).then((res) => {
      let resData = res.data || {}
      this.userData.longCycle = resData.longCycle
      this.userData.lastsDays = resData.lastsDays
      this.userData.baseForecastDays = resData.baseForecastDays
    }), 500, true)
  }
}
</script>

<style lang="scss">
@import "@/pages-other/menstrualCycleSetting/index.less";
</style>
